import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Row,Col,Select,Popconfirm} from 'antd';
import styles from '../Emergencysupplies/index.less';

export default connect(({ emerg, loading }) => ({ emerg, loading }))(({emerg, dispatch,loading})=>
    <div className={styles.container}><PagesPOST dispatch={dispatch} {...emerg} loading={loading.global}/></div>);


class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            standard: "",
            remark :"",
        };
    }
    componentWillMount () {
        this.props.dispatch({
            type:'emerg/goList',payload:{id:localStorage.getItem('id')},
        });
    }
    render (){
        let {getEmergListData,visible,dispatch,record,loading} = this.props;
        getEmergListData = getEmergListData?getEmergListData:{};
        let obj ={
            1:"个",
            2:"台",
            3:"副",
            4:"把",
            5:"卷",
            6:"套",
            7:"双",
            8:"条",
        };
        return <div style={{padding:20}}>
            <h2>应急基本物资详情</h2>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>应急物资名称：</b><span>{getEmergListData.name}</span>
                </div>
                <div className={styles.divIt}>
                    <b>物资型号：</b><span>{getEmergListData.model}</span>
                </div>

                <div className={styles.divIt}>
                    <b>项目类型：</b><span>{getEmergListData.item_type == "1"?'选择检查':"数组检查"}</span>
                </div>
            </div>
            <div className={styles.rowS}>
                <div className={styles.divIt}>
                    <b>单位：</b><span>{obj[getEmergListData.unit]}</span>
                </div>

                <div className={styles.divIt}>
                    <b>检查周期：</b><span>{getEmergListData.check_time== "1"?'年':getEmergListData.check_time== "2"?"月":
                        getEmergListData.check_time== "3"?'周':"日"
                    }</span>
                </div>

                <div className={styles.divIt}>
                    <b>备注：</b><span>{getEmergListData.remark}</span>
                </div>
            </div>
            <Button style={{margin:10}} type='primary' onClick={
                ()=>{dispatch({type:'emerg/save',payload:{visible:true}});
                    this.setState({
                        standard:'',
                        remark:'',
                    });
                }
            }>添加检查标准</Button>
            <Table
                columns={[
                    {
                        title: '检查标准',
                        dataIndex: 'standard',
                    },
                    {
                        title: '备注',
                        dataIndex: 'remark',
                    },
                    {
                        title: '操作',
                        dataIndex: 'option',
                        render:(text,record) =>
                            <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                                ()=> dispatch({type:"emerg/listDelete",payload:{id:record.id}})
                            } okText="是" cancelText="否">
                                <a style={{color:"red"}}>删除</a>
                            </Popconfirm>,
                    },
                ]}
                size="small"
                loading={loading.global}
                rowKey={id=>id.id}
                dataSource={getEmergListData.materialStandards || null}
                position={{
                    pageSize:10,
                    showSizeChanger: false,
                }} />
            <p className={styles.divIt}>图片：</p>
            {
                getEmergListData.pics && getEmergListData.pics.map((itme,index)=>{
                    return <img key={index} style={{height:120,width:120,margin:10}} src={itme}/>;
                })
            }
            <br/>

            <Modal
                title={record.id?"修改检查标准":'新增检查标准'}
                visible={visible}
                confirmLoading={loading}
                onOk={()=>{
                    let {standard,remark} = this.state;
                    if(standard && remark){
                        dispatch({type:'emerg/postList',payload:{
                            standard:standard,
                            remark:remark,
                            material_id:localStorage.getItem('id'),
                        }});
                    }else{
                        message.error('请填写完整！');
                    }
                }}
                onCancel={()=>dispatch({type:"emerg/save",payload:{visible:false,record:{}}})}
            >
                <Row>
                    <Col span={6}><span><span style={{color:'red'}}>*</span>检查标准:</span></Col>
                    <Col span={14}>
                        <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                            onChange={e => this.setState({standard: e.target.value})}
                            value={this.state.standard}
                            placeholder="检查标准"/>
                    </Col>
                    <Col span={6}><span><span style={{color:'red'}}>*</span>备注:</span></Col>
                    <Col span={14}>
                        <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                            onChange={e => this.setState({remark: e.target.value})}
                            value={this.state.remark}
                            placeholder="备注"/>
                    </Col>
                </Row>
            </Modal>
        </div>;
    }
}
